import React, { useEffect, useState } from "react";
import big from "@/assets/images/home/xiaolang.png";
import ad1 from "@/assets/images/home/examination.png";
import ad2 from "@/assets/images/home/books.png";
import ad3 from "@/assets/images/home/practice.png";

import "./home.less";
import { HomePageApi } from "@/api";
import SubjectItem from "@/components/SubjectItem";
interface IHomeData {
  title: string;
  collect: number;
  study: number;
  wrong: number;
  total: number;
  subjects: IExamModel[];
}
//定义自定义hook抽离首页数据
function useHomeData(): [IHomeData, () => void] {
  const [title, setTitle] = useState("");
  const [collect, setCollect] = useState(0);
  const [study, setStudy] = useState(0);
  const [wrong, setWrong] = useState(0);
  const [total, setTotal] = useState(0);
  // 当前设置的大学科下面的每个小的题目分类
  const [subjects, setSubjects] = useState<IExamModel[]>([]); // useState可以传递泛型，用来约定 前面的数据的类型

  function getHomeData() {
    //首页的数据，可能长时间内，是不需要重新请求，我们为优化性能，做一次缓存，如果需要获取数据，先判断缓存里面有没有，如果没有在请求
    //但是如果做，切换学科的功能，需要点击确定切换的时候，把缓存清掉，因为两边的数不一样了
    let homeData = sessionStorage.getItem("homedata");
        // 1. 判断 sessionStorage里面是否有数据
    if (homeData) {
        // 4. 如果存在，就直接从 sessionStorage 里面取
      let data = JSON.parse(homeData) as IHomeDataModel;
      setTitle(data.exam.title);
      setCollect(data.collect);
      setStudy(data.study);
      setWrong(data.wrong);
      setTotal(data.exam.itemCount);
      setSubjects(data.exemItems);
    } else {
        // 2. 没有数据 向服务器发请求
      HomePageApi().then((res) => {
        console.log(res);
        if (res.errCode === 0) {
          //更新数据
          setTitle(res.data.exam.title);
          setCollect(res.data.collect);
          setStudy(res.data.study);
          setWrong(res.data.wrong);
          setTotal(res.data.exam.itemCount);
          setSubjects(res.data.exemItems);
          // 3. 把请求回来的数据存到 sessionStorage
          sessionStorage.setItem("homedata", JSON.stringify(res.data));
        }
      });
    }
  } //把首页的数据请求回来，因为我们不会再次获取这个数据，可以把请求也一并写入自定义hook
  useEffect(() => {
    getHomeData();
  }, []);
  const homeData: IHomeData = { title, collect, study, wrong, total, subjects };
  return [homeData, getHomeData];
}

export default function Home() {
  let [homeData, getHomeData] = useHomeData();
  return (
    <div className="home">
      <section className="subjects">
        <h2 className="sub-name">{homeData.title}</h2>
        <div>
          <span>切换学科</span>
          {/* <ArrowRightIcon/> */}
        </div>
      </section>
      <section className="wel">
        <p>欢迎Tomato来到学习库</p>
        <div className="wel-bt">
          <img src={big} alt="" />
          <section>
            <section>
              已学{homeData.study}题 <span>|</span> 共{homeData.total}题
            </section>
            <section style={{ display: "flex" }}>
              <ul>
                <li>{homeData.wrong}</li>
                <li>错题</li>
              </ul>
              <ul>
                <li>{homeData.collect}</li>
                <li>收藏</li>
              </ul>
            </section>
          </section>
        </div>
      </section>
      <section className="adv">
        <img src={ad1} alt="" />
        <img src={ad2} alt="" />
        <img src={ad3} alt="" />
      </section>
      <section className="lib">
        <h2>学科题库</h2>
        <div>
          {homeData.subjects.map((item) => (
            <SubjectItem data={item} key={item.id} />
          ))}
        </div>
      </section>
    </div>
  );
}
